<template>
  <div class="home">

    <!-- 内容卡片 -->
    <div class="card">
      <img class="avatar" :src="avatarUrl" alt="头像" />
      <h1>欢迎回来!</h1>
      <p class="random-text">{{ randomMessage }}</p>
      <button class="gitee-btn" @click="goToGitee">Gitee仓库</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      avatarUrl: 'https://foruda.gitee.com/avatar/1709456521780287417/11426222_li0802_1709456521.png!avatar200',
      messages: [
        '今天也是充满欧气的一天哟～✨',
        '人家才不是为了你写代码呢！别误会了哼！(≧へ≦)',
        '喂！程序猿君，再摸鱼就要惩罚你啦～٩(๑`^´๑)۶',
        '代码写完了可以奖励我一杯奶茶嘛？(〃▽〃)',
        '加油加油～前端是有魔法的技术哦！☆彡',
        '今天也要元气满满地调 bug 哦！( •̀ ω •́ )✧',
        '你点开我就是喜欢我对吧？别嘴硬了~(///▽///)',
        '不要再打开 Gitee 啦，会变笨的哟~（滑稽）',
        '主人～不可以一直加班啦，要休息的说~(๑•́ ₃ •̀๑)',
        '我才不是喜欢你写的代码呢……才怪～(〃∀〃)',
      ],
      randomMessage: ''
    };
  },
  created() {
    this.randomMessage = this.messages[Math.floor(Math.random() * this.messages.length)];
  },
  methods: {
    goToGitee() {
      window.open('https://gitee.com/li0802/vue-project', '_blank');
    }
  }
};
</script>

<style scoped>
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 75vh;
  min-width: 100vw;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.home::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 65%; height: 100%;
  background-image: url('/src/assets/img/2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  animation: rotateBg 1s ease-out forwards;
}


.card {
  position: relative;
  z-index: 2;
  padding: 50px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 600px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  animation: fadeIn 0.8s ease-in-out;
}

/* 背景图层 */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/src/assets/img/2.png'); /* 替换为你喜欢的背景图 */
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  opacity: 0.3;
  z-index: -1;
  animation: slideInFromLeft 1s ease-out forwards;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #ff6d9e;
  margin-bottom: 30px;
}

h1 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}

.random-text {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
}

.gitee-btn {
  background-color: #ff6b9d;
  color: white;
  border: none;
  padding: 14px 30px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.gitee-btn:hover {
  background-color: #e8431f;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 0.3;
  }
}

@keyframes rotateBg {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 0.3;
  }
}
</style>

